<template>
    <rx-layout>
        <template v-slot:center>
            <div class="BpmRetrieveTask-center">
                <a style="color: #4d9eff;display:inline-block;padding-bottom: 16px;">{{ subject }}</a>
                <div style="margin-bottom: 0.5rem">
                    <div style="margin-bottom: 0.25rem">{{i18n('opinion','意见')}}</div>
                    <textarea class="BpmRetrieveTask-textarea" v-model="form.opinion" :placeholder="i18n('msg2','请输入意见')"></textarea>
                </div>
                <div style="margin-bottom: 0.25rem">{{i18n('notifyMethod','通知方式')}}</div>
                <div>
                    <checkbox-group @change="checkboxChange">
                        <label style="margin-right:0.5rem" v-for="(item, index) in msgOptions" :key="index">
                            <checkbox :value="item.value"/>
                            <span>{{ item.label }}</span>
                        </label>
                    </checkbox-group>
                </div>
            </div>
        </template>
        <template v-slot:footer>
            <div class="bpm-footer">
                <div @click="closeWindow" class="bpm-footer-close">{{i18n('close','取消')}}</div>
                <div @click="handTrans" class="bpm-footer-ok">{{i18n('ok','确定')}}</div>
            </div>
        </template>
    </rx-layout>
</template>

<script>
import RxLayout from '@/components/RxLayout'
import BpmPublicApi from '@/api/rxBpm/BpmPublicApi'
import BpmTaskTransferApi from "@/api/rxBpm/bpmTaskTransfer.js";

export default {
    name: "BpmRetrieveTask",
    components: {
        RxLayout
    },
    data() {
        return {
            taskId: '',
            subject: '',
            msgOptions: [],
            form: {
                opinion: "",
                msgTypes: []
            },
        }
    },
    onLoad(option) {
        let optionData = JSON.parse(option.data);
        this.taskId = optionData.taskId;
        this.subject = optionData.subject;
        this.init();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"bpmTaskLang.BpmInstTakeBack",key);
        },
        init() {
            this.form.taskId = this.taskId;
            BpmPublicApi.getMessageHandler().then(res => {
                res.forEach((val) => {
                    this.msgOptions.push({label: val.name, value: val.type})
                })
            })
        },
        handTrans() {
            this.form.msgTypes = this.form.msgTypes.join(",");
            BpmTaskTransferApi.doRetrieveTask(this.form).then(res => {
                if (res.success) {
                    uni.showToast({
                        title: res.message, // 消息内容
                        duration: 2000, // 持续时间（单位：毫秒）
                        icon: 'none' // 图标类型（可选值：success/loading/none）
                    });
                    uni.navigateBack({
                        delta: 1,//返回层数，2则上上页
                    })
                } else {
                    uni.showToast({
                        title: res.message, // 消息内容
                        duration: 2000, // 持续时间（单位：毫秒）
                        icon: 'none' // 图标类型（可选值：success/loading/none）
                    });
                }
            })
        },
        closeWindow() {
            uni.navigateBack({
                delta: 1
            })
        },
        checkboxChange(e) {
            this.form.msgTypes = e.detail.value
        }
    }

}
</script>

<style scoped>
.BpmRetrieveTask-textarea {
    font-size: 0.8rem;
    height: 124px;
    width: calc(100% - 24px);
    border-radius: 8px;
    border: 1px solid rgba(232, 232, 232, 1);
    padding: 10px 10px 10px 10px;
}
.BpmRetrieveTask-center {
    background: white;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 1rem;
}

.bpm-footer {
    display: flex;
    grid-gap: 10px;
}

.bpm-footer-close {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.65);
}

.bpm-footer-ok {
    flex: 1;
    height: 45px;
    opacity: 1;
    border-radius: 8px;
    background: rgba(66, 133, 244, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: white;
}
</style>
